import { StyleSheet, View, Pressable, Text } from 'react-native';
import FontAwesome from "@expo/vector-icons/FontAwesome";

type ButtonProps = {
    label: string;
    onPress: () => void;
    iconName?: any;
};
export default function PrimaryButton({ label, onPress, iconName="camera" }:ButtonProps) {
    return (
            <View style={styles.primaryButtonContainer}>
                {/*主主题中的<Pressable>组件使用#fff的backgroundColor属性来设置按钮的背景颜色。如果我们将此属性添加到styles.button，则将为主主题和非样式主题设置背景颜色值。*/}
                <Pressable
                    style={[styles.button, {backgroundColor: "#fff"}]}
                    onPress={onPress}
                >
                    <FontAwesome
                        name={iconName}
                        size={18}
                        color="#25292e"
                        style={styles.buttonIcon}
                    />
                    <Text style={[styles.buttonLabel, {color: "#25292e"}]}>{label}</Text>
                </Pressable>
            </View>
        )
}

// 主主题按钮使用内联样式，它使用直接在styleprop中传递的对象覆盖StyleSheet.create()中定义的样式。内联样式使用JavaScript。
const commonStyles = StyleSheet.create({
    buttonContainer: {
        width: 320,
        height: 68,
        marginHorizontal: 20,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 3,
    },
});

const styles = StyleSheet.create({
    buttonContainer: commonStyles.buttonContainer,
    primaryButtonContainer:{
        ...commonStyles.buttonContainer,
        borderWidth: 4,
        borderColor: "#ffd33d",
        borderRadius: 18
    },
    button: {
        borderRadius: 10,
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    buttonIcon: {
        paddingRight: 8,
    },
    buttonLabel: {
        color: '#fff',
        fontSize: 16,
    },
});
